<script setup lang="ts">
import {
  Modal,
  Form,
  FormItem,
  FormInstance,
  Input,
  message,
} from "ant-design-vue";

import { Service, PlaylistInput } from "../api";
import { reactive, ref, watch } from "vue";
const open = defineModel<boolean>("open", { required: true });
const emits = defineEmits<{
  finish: [];
  toReigister: [];
}>();
const formRef = ref<FormInstance>();
const formState = reactive<Partial<PlaylistInput>>({});
const loading = ref(false);
const submit = async () => {
  try {
    await formRef.value?.validate();
    await Service.createPlaylist({
      input: formState as PlaylistInput,
    });
    emits("finish");
    open.value = false;
    message.success("创建歌单成功");
  } catch (error) {}
};
watch(open, () => {
  if (open) {
    formRef.value?.resetFields();
  }
});
</script>
<template>
  <Modal
    v-model:open="open"
    title="创建歌单"
    @ok="submit"
    ok-text="确定"
    cancel-text="取消"
    :confirmLoading="loading"
  >
    <Form
      ref="formRef"
      :model="formState"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <FormItem
        label="歌单名称"
        name="title"
        :rules="[{ required: true, message: '歌单名称不能为空' }]"
      >
        <Input v-model:value="formState.title" />
      </FormItem>
    </Form>
  </Modal>
</template>
